<template>
  <div>
    <button @click="fn">修改下标0</button>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name  }} -- {{ item.age }} -- {{ item.score }}
      </li>
    </ul>

    <button @click="nums[0] = 9999">修改下标0</button>
    <ul>
      <li v-for="item in nums" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {

  data() {
    return {
      list: [
        { id: 1, name: 'jack', age: 16, score: 99},
        { id: 2, name: 'jack2', age: 162, score: 69},
        { id: 3, name: 'jack3', age: 164, score: 39},
        { id: 4, name: 'jack4', age: 166, score: 89},
      ],
      nums: [10,20,30,40,50]
    }
  },

  methods: {
    fn () {
      // 是响应式的
      // 如果通过下标取出来的是对象，改对象的属性就是响应式的
      this.list[0].name = 'rose1'
      this.list[0].age = 14
      this.list[0].score = 55
      

      // 相当于改变了数组的下标0，所以这不是响应式的
      // this.list[0] = { name: 'rose1', age: 14, score: 55 }
    }
  }
}
</script>

<style>

</style>